<template>
	<view class="flex-col h-max">
		<view class="" style="background: linear-gradient(46deg, #00C2CF 0%, #1ED2BE 100%);">
			<u-navbar :custom-back="$navBack" is-back backIconColor="#fff" titleColor="#fff" :border-bottom="false"
				title="服务设置" title-bold :is-fixed="false" :background="{background:'#fff0'}">
			</u-navbar>
			<view class="p20 flex w-max">
				<view class="fs26 color-fff " @click="$u.route('/pages/index/chooseAddress/chooseAddress')">
					{{myAdd.name||'请选择'}}
				</view>
				<image src="/static/img/index/arr.png" class="h14 w14 ml10 mr20" mode=""></image>
				<u-search placeholder="输入名称筛选医院" height="72" bg-color="#fff" class="flex1 " :show-action="false"
					:search-icon-color="$zs" disabled @click="">
				</u-search>
			</view>
		</view>
		<!-- <view class="flex bg-fff w-max   pt28 pb20 px20 nowrap">
			<view class="color-666 fs28 ">当前选择：</view>
			<scroll-view scroll-x="true" class="flex1 color-zs  ov-h">
				{{this.servicesName||'请选择'}}
			</scroll-view>
		</view> -->
		<view class="flex flex1 ">
			<scroll-view scroll-y class="w40p h-max bg-f5f color-999" style="height: 100%;">
				<view class="flex row-center ov-h p20 relative" :class="{'bg-fff color-333 fw-w':current==index}"
					@click="current=index" v-for="(item,index) in list" :key="index">
					{{item.name}}
					<view class="absolute top0 right0" v-if="hospital_id.includes(item.id)">
						<image src="/static/img/icon/sel1.png" class="w20 h20" mode=""></image>
					</view>
				</view>
			</scroll-view>
			<scroll-view scroll-y class="flex1 h-max bg-fff" style="height: 100%;">
				<block v-for="(item,index) in list" :key="index">
					<view class="pl20 pr20" v-if="current==index">
						<view class="flex pt32 pb32 border-b" @click="setDome(item.id,item1.service_id)" v-for="(item1,index1) in item.service" :key="index1">
							<view class="color-666 flex1">
								<text>{{item1.name}}</text>
							</view>
							<view class="w36 h36" >
								<image src="/static/img/icon/sel1.png" v-if="service_id.includes(item1.service_id)"
									class="wh-max" mode=""></image>
								<image src="/static/img/icon/sel0.png" v-else class="wh-max" mode=""></image>
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
		<view class="h120"></view>
		<view class="pf bottom0 left0  w-max flex">
			<view class="p24 flex1">
				<u-button type="warning" plain ripple @click="$navBack()">取消</u-button>
			</view>
			<view class="p24 flex1">
				<u-button type="warning" ripple @click="submit">确认</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				current: 0,
				myAdd: this.$getCache('myAdd') || '',
				services: []
			};
		},
		onLoad(e) {
			if (e.services) {
				console.log(e.services, e.services.length);
				this.services = JSON.parse(e.services)
				console.log(this.services);
			}
		},
		computed: {
			hospital_id() {
				return this.services?.map(e => e.hospital_id) || []
			},
			service_id() {
				let id = this.list?. [this.current]?.id || '' //获取当前选中栏
				let aa = this.services?.find(e => e.hospital_id == id)?.service_id || []
				return aa
			},
			servicesName() { //获取名称
				let aa = ''
				this.services.map(e => {
					let index = this.list?.findIndex(r => e.hospital_id == r.id)
					if (index == -1) return
					aa = aa + this.list[index].name + ':'
					aa = aa + this.list[index]?.service?.filter(t => e.service_id.includes(t.service_id))?.map(t =>
						t.name) || ""
					aa += '。'
				})
				return aa
			}
		},
		onShow() {
			this.myAdd = this.$getCache('myAdd') || ''
			this.getHospital()
		},
		methods: {
			setDome(hospital_id, service_id) {
				let index1 = this.services.findIndex(e => e.hospital_id == hospital_id) //查询当前医院是否存在
				if (index1 == '-1') { //医院不存在 则添加
					return this.services.push({
						"hospital_id": hospital_id * 1,
						'service_id': [service_id * 1]
					})
				}
				let service = this.services[index1].service_id //有这家医院 获取医院项目
				let index2 = service.findIndex(e => e == service_id) //查询项目是否存在
				if (index2 == '-1') return service.push(service_id * 1) //不存在 则添加
				service.splice(index2, 1) //存在 则删除
				if (!service.length) this.services.splice(index1, 1) //医院无项目 则取消医院
			},
			submit() {
				uni.$emit('setDome', this.services) //发送选中项目
				console.log(this.services);
				uni.$emit('setDomeName', this.servicesName) //发送选中项目名称
				console.log(this.servicesName);
				this.$navBack()
			},
			getHospital() { //获取医院项目列表
				let params = {
					city_id: this.myAdd.id
				}
				if (!params.city_id) return this.$msg('请选择地址')
				this.$request('/master/commom/getHospital', params).then(res => {
					this.list = res.data
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background: #fff;
	}

	.tab-active::before {
		content: "";
		position: absolute;
		border-left: 4px solid $zs;
		height: 40%;
		left: 0;
		// top: 39rpx;
		top: 50%;
		transform: translateY(-50%);
	}
</style>
